import { memo } from 'react';
import type { FC } from 'react';
import { Typography } from 'antd';
import { QuestionTitlePropsType, QuestionTitleDefaultProps } from './Interface';

const { Title } = Typography;

const QuestionTitle: FC<QuestionTitlePropsType> = (
  props: QuestionTitlePropsType
) => {
  const {
    text = '',
    level = 1,
    isCenter = false,
  } = { ...QuestionTitleDefaultProps, ...props };
  const genFontSize = (level: number) => {
    switch (level) {
      case 1:
        return 24;
      case 2:
        return 20;
      case 3:
        return 16;
      default:
        return 16;
    }
  };
  return (
    <Title
      level={level}
      style={{
        textAlign: isCenter ? 'center' : 'left',
        marginBottom: '0px',
        fontSize: `${genFontSize(level)}px`,
      }}
    >
      {text}
    </Title>
  );
};

export default memo(QuestionTitle);
